import TChip from 't/basic/chip/Component.vue';

import useMappingProps from 't/common/hooks/useMappingProps';
import {
  commonProps,
  pickOwnForBasicComponent,
  usePropsTwoWayValues,
} from 't/common/utils';
import {
  computed,
  defineComponent,
  getCurrentInstance,
  nextTick,
  onMounted,
  reactive,
  ref,
  toRef,
  watch,
} from 'vue';

import './ChipGroup.scss';
import _, { forIn } from 'lodash';

import {
  date,
  debounce,
  dom,
  setCssVar,
  useQuasar,
  scroll,
} from '@teld/q-components';

import {
  useClipProps,
  useClipItem,
} from 't/bussiness/quick-filter/use-quick-filter';

import HelpTip from './HelpTip';

export default defineComponent({
  props: {
    ...commonProps,
    ...useClipProps,
    showAllItem: { type: Boolean, default: true },
  },
  emits: ['filterChanged'],

  setup(props, { attrs, emit, expose, slots }) {
    const vm = getCurrentInstance();
    const $q = useQuasar();

    const defaultSlot = clip => {
      return slots.default ? (
        slots.default(clip)
      ) : // : `${clip.label} ${props.enableStatistics ? ' ' + clip.count || '' : ''}`;
      props.enableStatistics && props.showSummaryCount ? (
        <>
          {clip.label} <span class='item-count'>{clip.count}</span>
        </>
      ) : (
        clip.label
      );
    };

    function emitFilterChanged() {
      emit('filterChanged');
    }

    const readerAllItemCount = clips => {
      let sumCount = _.sumBy(clips, c => c.count);

      return sumCount && props.showTotalCount ? (
        <>
          {$q.lang.quickFilter?.all} <span class='item-count'>{sumCount}</span>
        </>
      ) : (
        $q.lang.quickFilter?.all
      );
    };
    const allItemSlot = clips => {
      let sumCount;
      return slots.allItemSlot
        ? slots.allItemSlot(clips)
        : props.enableStatistics && props.showSummaryCount
          ? readerAllItemCount(clips) //  ((sumCount = _.sumBy(clips, c => c.count)),`${$q.lang.quickFilter?.all} ${sumCount && props.showTotalCount ? ' ' + sumCount : ''}`)
          : `${$q.lang.quickFilter?.all}`;
    };

    const allValue = ref(false);

    const { computedClips } = useClipItem(props);

    watch(
      () => props.clips,
      () => {
        if (props.enableAllItem) {
          if (props.clips.some(c => c.selected)) {
            allValue.value = false;
          }
        }
      },
    );

    const render = () => {
      return (
        <div class='row FilterItem items-center' style=''>
          {slots.before && slots.before()}
          {props.showTitle && props.label && (
            <div class='t-quick-filter_chip-group-label'>
              {props.label}
              <HelpTip {...props}></HelpTip>
            </div>
          )}
          {props.showAllItem &&
            // props.enableStatistics &&
            props.enableAllItem && (
              <>
                <TChip
                  tabindex='1'
                  class='tr-chip-select-type-moon'
                  // disable
                  style={{ height: '24px' }}
                  v-model:selected={allValue.value}
                  square
                  onClick={() => {
                    props.clips.forEach(c => {
                      c.selected = false;
                    });
                    emitFilterChanged();
                  }}
                >
                  {allItemSlot(props.clips)}
                </TChip>
              </>
            )}
          {computedClips.value.map(clip => {
            return (
              <>
                <TChip
                  tabindex='1'
                  class='tr-chip-select-type-moon'
                  style={{ height: '24px' }}
                  square
                  v-model:selected={clip.selected}
                  onClick={() => {
                    allValue.value = false;
                    if (false == props.isMultiple) {
                      props.clips.forEach(c => {
                        if (c != clip) {
                          c.selected = false;
                        }
                      });
                    }
                    emitFilterChanged();
                  }}
                >
                  {defaultSlot(clip)}
                </TChip>
              </>
            );
          })}
          {props.isLast && <span class={['divider']}></span>}
        </div>
      );
    };

    return () => {
      return render();
    };
  },
});
